<template>
  <AppLayout>
    <!-- 收藏内容区域 -->
    <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
      <h2 class="text-xl font-bold text-gray-900 mb-4">我的收藏</h2>
      <div class="space-y-4">
        <PostCard v-for="post in favorites" :key="post.id" :post="post" />
      </div>
    </div>

    <!-- 加载状态 -->
    <div
      v-if="isLoading"
      class="text-center py-8 bg-white rounded-xl shadow-sm"
    >
      <div
        class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-t-transparent"
      ></div>
      <p class="mt-2 text-gray-600">加载中...</p>
    </div>

    <!-- 空状态 -->
    <div
      v-else-if="favorites.length === 0"
      class="text-center py-12 bg-white rounded-xl shadow-sm"
    >
      <i class="fa fa-star-o text-4xl text-gray-300 mb-3"></i>
      <p class="text-gray-500">暂无收藏的帖子</p>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import {
  getFavorites,
  type Post
} from "../services/postService" // 导入Post类型
import { isLoggedIn } from "../services/userService"
import AppLayout from "./layout/AppLayout.vue"
import PostCard from "./PostCard.vue" // 使用PostCard组件展示收藏的帖子

// 使用正确的类型定义
const favorites = ref<Post[]>([])
const isLoading = ref(false)

// 加载收藏列表
const loadFavorites = async () => {
  try {
    isLoading.value = true
    // 调用接口获取收藏列表，设置适当的页面大小
    const data = await getFavorites({ size: 20 })
    favorites.value = data || []
  } catch (error) {
    console.error("获取收藏列表失败:", error)
    // 使用模拟数据作为备用
    favorites.value = getMockFavorites()
  } finally {
    isLoading.value = false
  }
}

// 获取模拟收藏数据（符合Post类型的模拟数据）
const getMockFavorites = (): Post[] => {
  return [
    {
      id: 1,
      uid: 1,
      cateId: 1,
      cateName: "技术讨论",
      title: "Tailwind CSS v3 新特性全面解析",
      content: "Tailwind CSS v3带来了许多令人兴奋的新特性，包括JIT编译模式、颜色系统升级、更高效的前缀处理等。本文将深入探讨这些新特性的使用方法和性能优化效果...",
      media: ["https://picsum.photos/seed/tailwind/300/200"],
      readCount: 256,
      commentCount: 28,
      likeCount: 64,
      collectionCount: 12,
      postTop: 0,
      createTime: "2025-09-05 14:30:00",
      updateTime: "2025-09-05 14:30:00",
      user: {
        uid: 2,
        loginId: "lisi",
        nickname: "李四",
        avatar: "https://picsum.photos/seed/user2/50/50",
        intro: "前端开发工程师，喜欢研究新技术"
      },
      canEdit: false,
      canDelete: false,
      liked: true,
      collected: true // 已收藏状态
    },
    {
      id: 3,
      uid: 1,
      cateId: 2,
      cateName: "问答求助",
      title: "如何优化大型React应用的性能？",
      content: "我们团队正在开发一个大型React应用，随着功能的增加，应用的性能逐渐下降。主要问题包括首屏加载慢、组件渲染卡顿等。有什么好的优化策略吗？希望能分享一些实战经验...",
      media: [],
      readCount: 342,
      commentCount: 45,
      likeCount: 92,
      collectionCount: 28,
      postTop: 0,
      createTime: "2025-09-04 09:15:00",
      updateTime: "2025-09-04 09:15:00",
      user: {
        uid: 4,
        loginId: "zhaoliu",
        nickname: "赵六",
        avatar: "https://picsum.photos/seed/user4/50/50",
        intro: "全栈工程师，热爱分享技术心得"
      },
      canEdit: false,
      canDelete: false,
      liked: false,
      collected: true // 已收藏状态
    }
  ]
}

// 组件挂载时加载收藏列表
onMounted(() => {
  if (!isLoggedIn()) {
    // 如果未登录，可以考虑跳转到登录页面
    // router.push("/login")
    // 或者使用模拟数据
    favorites.value = getMockFavorites()
    return
  }

  loadFavorites()
})
</script>

<style scoped>
/* 组件特定样式 */
</style>
